<template>
  <main class="wh-full flex-col">
    <!--    <div-->
    <!--      class="flex px-24 h-64 items-center auto-bg justify-between"-->
    <!--      border-b="1px solid normal_border"-->
    <!--    >-->
    <!--      <slot name="title">-->
    <!--        <span class="font-600 text-18">{{ title || route.meta?.title }}</span>-->
    <!--      </slot>-->

    <!--      <a-space>-->
    <!--        <a-input class="w-320" placeholder="搜索菜单">-->
    <!--          <template #prefix><SearchOutlined></SearchOutlined></template>-->
    <!--        </a-input>-->
    <!--      </a-space>-->
    <!--    </div>-->
    <div
      v-if="$slots.title || $slots.action"
      class="px-20 pt-12 flex items-center auto-bg z-11"
      :style="styles"
    >
      <a-row type="flex" class="flex-1" justify="space-between" align="middle">
        <a-col flex="1">
          <slot name="title"></slot>
        </a-col>
        <a-col>
          <slot name="action"></slot>
        </a-col>
      </a-row>
    </div>

    <div class="flex-1 auto-bg flex-col overflow-hidden">
      <slot></slot>
    </div>
  </main>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    showHeader?: boolean
    title?: string | null
    back?: boolean
    border?: boolean
  }>(),
  {
    showHeader: true,
    title: null,
    back: false,
    border: false,
  },
)

const styles = computed(() => {
  return props.border
    ? {
        boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 4px,rgba(9, 30, 66, 0.08) 0 1px 10px;',
      }
    : null
})
</script>
